<template>
  <div>
    <el-dialog
      :title="$t('common.Add')"
      :visible.sync="Visible"
      width="500px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('CustomerManagementLang.consignee_name')}}:</span
        >
        <span class="Span borderB  contant">
          <el-input
            ref="recive_user"
            @blur="handleBlur('recive_user',$event)"
            @focus="handleFocus($event)"
            class="Required"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.recive_user"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('CustomerManagementLang.consignee_phone')}}:</span
        >
        <span class="Span borderB  contant">
          <el-input
            ref="recive_phone"
            @blur="handleBlur('recive_phone',$event)"
            @focus="handleFocus($event)"
            class="Required"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.recive_phone"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR"
          >{{$t('CustomerManagementLang.consignee_region')}}:</span
        >
        <span class="Span contant">
          <el-input
            ref="recive_addr"
            @blur="handleBlur('recive_addr',$event)"
            @focus="handleFocus($event)"
            class="Required"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.recive_addr"
          ></el-input>
        </span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    // 接收绑定参数
    
  },
  data() {
    return {
      Visible: false,
      data: {
        recive_user: "",
        recive_phone: "",
        recive_addr: "",
      },
      confirmTrue: true, //确定按钮保护
    };
  },
  created() {
   
  },
  mounted() {},
  watch: {},
  methods: {
    init(data) {
      this.Visible = true;
    },
    // 提交
    confirm() {
      //是否有空值必选项标识
      let type = true;
      //输入框判断是否有值
      if(!this.data.recive_user){
        this.$refs.recive_user.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.recive_phone){
        this.$refs.recive_phone.$el.childNodes[1].style.border='1px solid red'
        type=false
      }else{
        var isTrueTel=/^\+?\d*$/.test(this.data.recive_phone);
        if(!isTrueTel){
          this.$refs.recive_phone.$el.childNodes[1].style.border='1px solid red'
          type=false
        }
      }
      if(!this.data.recive_addr){
        this.$refs.recive_addr.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if (type && this.confirmTrue) {
          this.confirmTrue=false
          window.setTimeout(()=>{
            this.confirmTrue=true
          },1000);
          let params = new FormData();
          params.append("recive_user", this.data.recive_user);
          params.append("recive_phone", this.data.recive_phone);
          params.append("recive_addr", this.data.recive_addr);
          this.$postForm("reciveAdd", params).then((res) => {
            this.confirmTrue = true;
            if(res.success){
              this.$message.success(res.msg);
              this.$emit("success");
              this.cancel()
            }
          });
        }
    },
    //取消
    cancel() {
      this.data = {
        recive_user: "",
        recive_phone: "",
        recive_addr: "",
      };
      this.Visible = false;
      
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
         dom[i].style.border = "1px solid #E0E3E9";
      }
      let domUpload = document.getElementsByClassName("el-upload");
      for (let i = 0; i < domUpload.length; i++) {
         domUpload[i].style.border = "1px dashed #E0E3E9";
      }
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name, event) {
      if (!this.data[name]&&this.data[name]!==0) {
        event.target.style.border = "1px solid red";
      }
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event) {
      event.target.style.border = "1px solid #E0E3E9";
    },
  },
};
</script>

<style scoped lang="less" >
.midContant{
  .Span{
    width: 50%;
  }
}
</style>